<template>
    <div class="app-container">
      <el-row :gutter="60">
        <el-col :span="15">
          <el-form :model="form" ref="queryRef"  label-position="top">
            <el-form-item label="通知账号" prop="userId">
              <el-select
                v-model="form.region"
                placeholder="请输入通知账号"
                style="width: 400px"
              >
                <el-option
                  v-for="item in acccountList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="接收用户">
              <el-card style="width: 100%; min-height: 150px;" >
                <el-tag v-for="tag in tagArray" :key="tag" closable style="margin-right: 5px;" @close="handleClose(tag)">
                  {{ tag }}
                </el-tag>
              </el-card>
            </el-form-item>
            <el-form-item label="附件（选填）">
              <el-upload
                v-model:file-list="fileList"
                class="upload-demo"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="3"
                :on-exceed="handleExceed"
              >
                <el-button><el-icon><Upload/></el-icon>点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="地址链接（选填）">
                <el-input v-model="form.url" placeholder="通知点击后跳转的地址链接"></el-input>
            </el-form-item>
            <el-form-item label="消息内容">
              <el-input
                v-model="form.content"
                maxlength="50"
                placeholder="Please input"
                show-word-limit
                type="textarea"
                rows="8"
              />
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="form.resource">
                <el-radio border value="register">发送给所有已注册用户</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitDataScope">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="9">
          <el-card>
            <SelectUserDialog
              title=""
              :selectChange="true"
              :table-data="tableData"
              @submit="handleSubmitUsers"
              v-model="open"
              ref="selectUser"
            />
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>
<script setup>
  import { ref, reactive, onMounted, watch, nextTick } from 'vue';
  import SelectUserDialog from '@/components/SelectUserDialog';
  import { getAccountList } from "@/api/im/account";
  const form = ref({})
  const acccountList = ref([])
  const loading = ref(true);
  const tagArray = ref([]);
  const selectUser = ref();
  function getList(){
    const params = {
      pagination: {pageNumber: 1, showNumber: 100},
    }
    getAccountList(params).then(res => {
      acccountList.value = res.data.notificationAccounts;
      loading.value = false;
    })
  }
  function handleSubmitUsers (selectArray) {
    const selectName = selectArray.map(item =>item.nickname)
    tagArray.value = selectName;
  }
  function handleClose (tag){
    tagArray.value = tagArray.value.filter(item => item !== tag);
    selectUser.value.handleCancelSelect(tag)
  }
  getList()
</script>
<style scoped>
.app-container{
  background: #FAFAFA;
}
</style>
